<template>
    <p>Vuex</p>
    <p>count : {{ count }}</p>
    <p>tenTimes :{{ tenTimes }}</p>
    <button @click="updateVuexCount">修改count</button>
    <button @click="asyncIncrement">修改count-action</button>
    <p>moduleA: countA:{{ store.state.a.countA }}</p>
    <p>moduleB: countB:{{ store.state.b.countB }}</p>

    <p>moduleA: doubleCountA: {{ store.getters.doubleCountA }}</p>
    <p>moduleB: doubleCountB: {{ store.getters['b/doubleCountB']}}</p>

    <button @click="moduleAincrementA">模块A-mutation-触发</button>
    <button @click="moduleBincrementB">模块B-mutation-触发</button>

    <button @click="moduleAasyncIncrementA">模块A-action-触发</button>
    <button @click="moduleBasyncIncrementB">模块B-action-触发</button>

</template>

<script setup>
import {computed} from 'vue'
import { useStore } from 'vuex'

//获得一个Vuex的实例化对象
const store = useStore()

const count = computed(()=>store.state.count)
const tenTimes = computed(()=>store.getters.tenTimes)

//触发mutations
const updateVuexCount = ()=>{
    store.commit("increment",{count:20})
}
//使用action
const asyncIncrement = () => store.dispatch('asyncIncrement',{count:30})


const moduleAincrementA =()=>{
    store.commit('incrementA')
}
const moduleBincrementB =() =>{
    store.commit('b/incrementB')
}
const moduleAasyncIncrementA =() =>{
    store.dispatch('asyncIncrementA')
}
const moduleBasyncIncrementB =() =>{
    store.dispatch('b/asyncIncrementB')
}
</script>